<template>
  <div>
    <!-- ======= Search ======= -->
    <div id="search">
      <h2 class="section-title orange">我的博客</h2>
      <h3 class="subtitle">这是我的学习经验分享</h3>
      <div class="search-form flex">
        <input type="text" placeholder="请输入关键词搜索">
        <button><i class="iconfont qm-search"></i></button>
      </div>
    </div> <!-- End Search -->

    <!-- ======= 最新博客 ======= -->
    <div id="blog" class="section">
      <ul class="blog-list flex flex-wrap justify-content-between">
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">jf dji jdlajio jdklajiemjla03emi od09mefqwe
              whjiojf0jis js ...</p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"><i class="iconfont qm-clock"></i>2022-07-21</span>
              <a href="" class="more-btn">查看更多<i class="iconfont qm-arrow-right"></i></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">jf dji jdlajio jdklajiemjla03emi od09mefqwe
              whjiojf0jis js ...</p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"><i class="iconfont qm-clock"></i>2022-07-21</span>
              <a href="" class="more-btn">查看更多<i class="iconfont qm-arrow-right"></i></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">jf dji jdlajio jdklajiemjla03emi od09mefqwe
              whjiojf0jis js ...</p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"><i class="iconfont qm-clock"></i>2022-07-21</span>
              <a href="" class="more-btn">查看更多<i class="iconfont qm-arrow-right"></i></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">jf dji jdlajio jdklajiemjla03emi od09mefqwe
              whjiojf0jis js ...</p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"><i class="iconfont qm-clock"></i>2022-07-21</span>
              <a href="" class="more-btn">查看更多<i class="iconfont qm-arrow-right"></i></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">jf dji jdlajio jdklajiemjla03emi od09mefqwe
              whjiojf0jis js ...</p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"><i class="iconfont qm-clock"></i>2022-07-21</span>
              <a href="" class="more-btn">查看更多<i class="iconfont qm-arrow-right"></i></a>
            </div>
          </div>
        </li>
        <li class="blog">
          <div class="img-box"></div>
          <div class="blog-info flex flex-column justify-content-evenly">
            <h3>大标题大标题大标题</h3>
            <p class="desc">jf dji jdlajio jdklajiemjla03emi od09mefqwe
              whjiojf0jis js ...</p>
            <div class="flex align-items-center justify-content-between">
              <span class="time"><i class="iconfont qm-clock"></i>2022-07-21</span>
              <a href="" class="more-btn">查看更多<i class="iconfont qm-arrow-right"></i></a>
            </div>
          </div>
        </li>
      </ul>
      <div class="more">
        <a href="" class="btn btn-blue">查看更多</a>
      </div>
    </div><!-- End 最新博客 -->
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
@import url("../assets/css/blog-common.css");
@import url("../assets/css/blog-list.css");
</style>